.loading-next {
  width: 100%;
  height: 100%;

  .loading-next-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.loading {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #f5eb7f;
  animation: rotate 2s linear infinite;

  &::before {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    left: 8px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: #b998ee;
    animation: rotate 2.4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: #68d7e5;
    animation: rotate 1.8s linear infinite;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
